<template>
  <div>
    <el-tree
      :data="meausData"
      :props="defaultProps"
      :expand-on-click-node="false"
      :show-checkbox="true"
      node-key="catId"
      :default-expanded-keys="defaultExpandedKeys">
    <span class="custom-tree-node" slot-scope="{ node, data }">
      <span>{{ node.label }}</span>
      <span>
        <!-- 需求中，一共三级菜单，只有一级和二级才能添加 -->
        <el-button
          v-if="node.level <= 2"
          type="text"
          size="mini"
          @click="() => append(data)">
          Append
        </el-button>
        <el-button
          type="text"
          size="mini"
          @click="() => update(data)">
          Update
        </el-button>
        <!-- 需求中，一共三级菜单，只有当前无下级才能删除 -->
        <el-button
          v-if="node.childNodes.length === 0"
          type="text"
          size="mini"
          @click="() => remove(node, data)">
          Delete
        </el-button>
      </span>
    </span>
    </el-tree>
    <!--  新增分类的对话框-->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      :close-on-click-modal="false"
    >
      <!-- 对话框表单内容 -->
      <el-form :model="categoryFormObject">
        <el-form-item label="分类名称">
          <el-input v-model="categoryFormObject.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图标">
          <el-input v-model="categoryFormObject.icon" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="计量单位">
          <el-input v-model="categoryFormObject.productUnit" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitData">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  data() {
    return {
      meausData: [],
      defaultExpandedKeys: [],     // 默认展开结点的key数组
      dialogVisible: false,        // 控制对话框的显示与隐藏
      dialogType: "",              // 对话框的类型（新增或者编辑）
      title: "",
      categoryFormObject: {
        parentCid: 0,
        name: '',
        catLevel: 0,
        showStatus: 1,
        sort: 0,
        catId: null,
        icon: '',
        productUnit: ''
      },                      // 对话框表单数据对象
      defaultProps: {
        children: 'children', // 后端查询的数据中哪个表示为子节点
        label: 'name'         // 后端查询的数据中哪个字段要用来要显示出来
      }
    }
  },
  methods: {
    // ----------------------------------获取三级分类列表的方法--------------------------------------
    getCategoryList() {
      this.$http({
        url: this.$http.adornUrl('/product/category/list/tree'),
        method: 'get'
      }).then(({data}) => {
        // 对象解构赋值
        console.log('获取到了数据:', data.data)
        this.meausData = data.data
      })
    },
    // ------------------------------点击append图标触发的方法-----------------------------------------------------------------------
    append(data) {
      this.dialogVisible = true
      this.dialogType = "add";
      this.title = "添加三级分类"
      // 数据赋值
      this.categoryFormObject.parentCid = data.catId;
      this.categoryFormObject.catLevel = data.catLevel * 1 + 1;
      this.categoryFormObject.catId = null;
      this.categoryFormObject.name = ''
      this.categoryFormObject.icon = ''
      this.categoryFormObject.productUnit = ''
      this.categoryFormObject.sort = 0
      this.categoryFormObject.showStatus = 1
    },
    // ---------------------------------新增三级分类数据的方法-------------------------------------------------------------------
    addCategory() {
      // 将数据提交给后台
      console.log("提交给后端的数据为：" + JSON.stringify(this.categoryFormObject, null, 2));
      this.$http({
        url: this.$http.adornUrl('/product/category/save'),
        method: 'post',
        data: this.$http.adornData(this.categoryFormObject, false)
      }).then(({data}) => {
        // 提示信息
        this.$message({
          message: '保存成功',
          type: 'success'
        })
        this.dialogVisible = false
        // 刷新数据
        this.getCategoryList()
        // 默认展开新增的节点的父节点
        this.defaultExpandedKeys = [this.categoryFormObject.parentCid]
      })
    },


    // ------------------------------删除节点的方法 node就是当前这个节点的信息，而data就是我们从数据库查到的数据---------------------------------
    remove(node, data) {
      // 触发了删除操作
      console.log(node, data)
      // 获取当前结点的id值
      let ids = [data.catId]
      // 消息提示
      this.$confirm(`确定要删除【${data.name}】此分类吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 进行删除操作
        this.$http({
          url: this.$http.adornUrl('/product/category/delete'),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(({data}) => {
          // 消息提示组件
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getCategoryList()
          // 展开删除节点的父节点
          this.defaultExpandedKeys = [node.parent.data.catId]
        })
      }).catch(() => {
      })
    },
    //---------------------------- 触发修改的方法----------------------------------
    update(data) {
      // 要修改的数据
      console.log("要修改的数据" + JSON.stringify(data))
      // 打开对话框
      this.dialogType = "update"
      this.title = "修改三级分类"
      this.dialogVisible = true
      // 请求后端获取最新的数据，防止并发错误拿到的是旧数据
      /*
      this.categoryFormObject.name=data.name
      this.categoryFormObject.catId=data.catId
       */
      this.$http({
        url: this.$http.adornUrl(`/product/category/info/${data.catId}`),
        method: 'get'
      }).then(({data}) => {
        console.log('最新数据为：', data)
        // 赋值
        this.categoryFormObject.name = data.data.name
        this.categoryFormObject.catId = data.data.catId
        this.categoryFormObject.icon = data.data.icon
        this.categoryFormObject.productUnit = data.data.productUnit
        this.categoryFormObject.parentCid = data.data.parentCid
        this.categoryFormObject.catLevel = data.data.catLevel
        this.categoryFormObject.sort = data.data.sort
        this.categoryFormObject.showStatus = data.data.showStatus
      })
    },

    //   ----------------------修改数据的方法(id有值是更新，没有值是新增)(需要考虑并发的问题)--------------------------
    updateCategory() {
      const {catId, name, icon, productUnit} = this.categoryFormObject;
      this.$http({
        url: this.$http.adornUrl('/product/category/update'),
        method: 'post',
        data: this.$http.adornData({catId: catId, name: name, icon: icon, productUnit: productUnit}, false)
      }).then(({data}) => {
        this.$message({
          message: '修改成功',
          type: 'success'
        })
        this.dialogVisible = false
        this.getCategoryList()
        this.defaultExpandedKeys = [this.categoryFormObject.parentCid]
      })
    },

    // --------------------对话框的提交方法（判断是新增还是修改）----------------------------------
    submitData() {
      if (this.dialogType === 'add') {
        this.addCategory()
      } else if (this.dialogType === 'update') {
        this.updateCategory()
      }
    },
  },

  // -------------------生命周期方法-----------------------------------------------
  created() {
    // 页面进行挂载的时候,获取三级分类的数据
    this.getCategoryList()
  }
}
</script>
